<template>
    <div>
       <div class="headerTitle">
          <div class="titltOne">
            <div class="images">
              <img src="../../../assets/images/totalStorage.png" alt="">
            </div>
            <div class="headerRight">
                 <div class="headerRightNum">34.5GB</div>
                 <div>数据中心当前存储总量</div>
            </div>
          </div>
          <div class="titltOne">
           <div class="images">
             <img src="../../../assets/images/generalWarehouse.png" alt="">
           </div>
           <div class="headerRight">
             <div class="headerRightNum">34.5GB</div>
             <div>数据中心当前存储总量</div>
           </div>
         </div>
          <div class="titltOne">
           <div class="images">
             <img src="../../../assets/images/totalScripts.png" alt="">
           </div>
           <div class="headerRight">
             <div class="headerRightNum">34.5GB</div>
             <div>数据中心当前存储总量</div>
           </div>
         </div>
       </div>
      <div class="centenBody">
          <el-row class="centenBodyLineOne">
              <el-col :span="8">
                <el-Card class="centenBodyLineOneCard">
                  <div class="centenBodyLineOneCard">
                    <div class="centenBodyLineOneCardTitle">数据日增长情况</div>
                    <ColumnDiagramPackaging :id="'lineList'" :data="lineDayList" :style="{width:'100%',height:'380px'}"></ColumnDiagramPackaging>
                  </div>
                </el-Card>
              </el-col>
              <el-col :span="8">
                <el-Card class="centenBodyLineOneCard centenBodyLineOneCardCenter">
                  <div class="centenBodyLineOneCard">
                    <div class="centenBodyLineOneCardTitle">实时数据日增长情况</div>
<!--                    <ColumnDiagramPackaging :id="'mapNum'" :data="mapList" :style="{width:'100%',height:'400px'}"></ColumnDiagramPackaging>-->
                    <ColumnDiagramPackaging :id="'mapNum'" :data="timeDayList" :style="{width:'100%',height:'380px'}"></ColumnDiagramPackaging>
                  </div>
                </el-Card>
              </el-col>
              <el-col :span="8">
                <el-Card class="centenBodyLineOneCard">
                  <div class="centenBodyLineOneCard">
                    <div class="centenBodyLineOneCardTitle">每天执行作业数</div>
                    <ColumnDiagramPackaging :id="'bookNum'" :data="bookNumList" :style="{width:'100%',height:'380px'}"></ColumnDiagramPackaging>
                  </div>
                </el-Card>
              </el-col>
          </el-row>
          <el-row class="centenBodyLineTwo">
          <el-col :span="8">
            <el-Card class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCard">
                <div class="centenBodyLineOneCardTitle">库表分布</div>
                <ColumnDiagramPackaging :id="'duChart'" :data="pieData" :style="{width:'100%',height:'400px'}"></ColumnDiagramPackaging>
              </div>

            </el-Card>
          </el-col>
          <el-col :span="8">
            <el-Card class="centenBodyLineOneCard centenBodyLineOneCardCenter">
                 <div class="centenBodyLineOneCard">
                   <div class="centenBodyLineOneCardTitle">库表存储Top5</div>
                   <ColumnDiagramPackaging :id="'bargragh'" :data="barData" :style="{width:'100%',height:'400px'}"></ColumnDiagramPackaging>
                 </div>
            </el-Card>
          </el-col>
          <el-col :span="8">
            <el-Card class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCard">
                <div class="centenBodyLineOneCardTitle">作业执行时长Top5</div>
                <ColumnDiagramPackaging :id="'jobExecution'" :data="durationList" :style="{width:'100%',height:'400px'}"></ColumnDiagramPackaging>
              </div>
            </el-Card>
          </el-col>
        </el-row>
          <el-row class="centenBodyLineTwo">
          <el-col :span="8">
            <el-Card class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCard">
                <div class="centenBodyLineOneCardTitle">库表分布2</div>
                <ColumnDiagramPackaging :id="'duChart1'" :data="pieData1" :style="{width:'100%',height:'400px'}"></ColumnDiagramPackaging>
              </div>

            </el-Card>
          </el-col>
          <el-col :span="8">
            <el-Card class="centenBodyLineOneCard centenBodyLineOneCardCenter">
                 <div class="centenBodyLineOneCard">
                   <div class="centenBodyLineOneCardTitle">库表存储Top6</div>
                   <ColumnDiagramPackaging :id="'bargragh1'" :data="barData1" :style="{width:'100%',height:'400px'}"></ColumnDiagramPackaging>
                 </div>
            </el-Card>
          </el-col>
          <el-col :span="8">
            <el-Card class="centenBodyLineOneCard">
              <div class="centenBodyLineOneCard">
                <div class="centenBodyLineOneCardTitle">作业执行时长Top6</div>
                <ColumnDiagramPackaging :id="'jobExecution1'" :data="durationList1" :style="{width:'100%',height:'400px'}"></ColumnDiagramPackaging>
              </div>
            </el-Card>
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script>
  import ColumnDiagramPackaging from '@/components/Wuxianju/ColumnDiagramPackaging';
  import 'echarts/map/js/china.js'
  export default {
      name: "index",
      components: {
          ColumnDiagramPackaging
      },
      // filters:{
      //     dateFormate(value){
      //         const dt = new Date(value);
      //         const h  = (dt.getHours()+'').padStart(2,'0')
      //         return `${h}h`
      //     }
      // },
      data(){
          return{
              timeDayList:{
                  axisLabel: {
                      color: "#1E1E1E",
                      fontWeight: 'bold',
                      fontSize: 12,
                  },
                  textStyle:{
                      color: "#1E1E1E",
                      fontWeight: 'bold',
                      fontSize: 12,
                  },
                  legend: [{
                      data: ['发射机秒数据','机房环境' ],
                      icon:'circle',
                      x:'right',
                      formatter: ["{a|{name}}"].join("\n"),
                      textStyle: {
                          rich: {
                              a: {
                                  width: 68
                              }
                          }
                      },
                  },{
                      data: ['发射机测温', '电力数据'],
                      icon:'circle',
                      x:'right',
                      top:'6%',
                      formatter: ["{a|{name}}"].join("\n"),
                      textStyle: {
                          rich: {
                              a: {
                                  width: 68
                              }
                          }
                      },
                  }],
                  xAxis: {
                      type: 'category',
                      axisTick: {
                          alignWithLabel: true
                      },
                      boundaryGap: false,
                      data: ['1-01', '1-02', '1-03', '1-04', '1-05', '1-06', '1-07']
                  },
                  yAxis: {
                      name:'（MB）',
                      type: 'value',
                      axisLine:{
                          show:true
                      },
                      nameTextStyle:{
                          color: "#1E1E1E",
                          fontWeight: 'bold',
                          fontSize: 12,
                      }
                  },
                  series: [
                      {
                          name:'发射机秒数据',
                          symbolSize: 10, // 设置折线上圆点大小
                          symbol: 'circle', // 设置拐点为实心圆
                          data: [420, 902, 901, 934, 1390, 1130, 920],
                          type: 'line',
                          // smooth: true,
                          itemStyle:{
                              color:'#F8B551',
                          }
                      },  {
                          name:'机房环境',
                          symbolSize: 10, // 设置折线上圆点大小
                          symbol: 'circle', // 设置拐点为实心圆
                          data: [820, 932, 901, 934, 1290, 1330, 1020],
                          type: 'line',
                          // smooth: true,
                          itemStyle:{
                              color:'#15ED71',
                          }
                      },{
                          name:'发射机测温',
                          symbolSize: 10, // 设置折线上圆点大小
                          symbol: 'circle', // 设置拐点为实心圆
                          data: [320, 532, 501, 334, 290, 1370, 920],
                          type: 'line',
                          // smooth: true,
                          itemStyle:{
                              color:'#FF9042',
                          }
                      },{
                          name:'电力数据',
                          symbolSize: 10, // 设置折线上圆点大小
                          symbol: 'circle', // 设置拐点为实心圆
                          data: [520, 432, 301, 434, 890, 930, 720],
                          type: 'line',
                          // smooth: true,
                          itemStyle:{
                              color:'#3385F5',
                          }
                      },
                  ]
              },
              lineDayList:{
                  axisLabel: {
                      color: "#1E1E1E",
                      fontWeight: 'bold',
                      fontSize: 12,
                  },
                  textStyle:{
                      color: "#1E1E1E",
                      fontWeight: 'bold',
                      fontSize: 12,
                  },
                  legend: [{
                      data: ['ODS层：mongoDB', ],
                      icon:'circle',
                      x:'right',
                  },{
                      data: ['DW层：kudu', ],
                      icon:'circle',
                      // x:'right',
                      top:'6%',
                      right:'7%',
                  }],
                  xAxis: {
                      type: 'category',
                      axisTick: {
                          alignWithLabel: true
                      },
                      boundaryGap: false,
                      data: ['1-01', '1-02', '1-03', '1-04', '1-05', '1-06', '1-07']
                  },
                  yAxis: {
                      name:'（MB）',
                      type: 'value',
                      axisLine:{
                          show:true
                      },
                      nameTextStyle:{
                          color: "#1E1E1E",
                          fontWeight: 'bold',
                          fontSize: 12,
                      }
                  },
                  series: [
                      {
                          name:'ODS层：mongoDB',
                          symbolSize: 0, // 设置折线上圆点大小
                          symbol: 'circle', // 设置拐点为实心圆
                          data: [920, 702, 601, 934, 1090, 1130, 1020],
                          type: 'line',
                          smooth: true,
                          itemStyle:{
                              color:'#3FAAF4',
                          },
                          areaStyle:{
                              color: "#1F72F0" ,
                          }
                      },  {
                          name:'DW层：kudu',
                          symbolSize: 0, // 设置折线上圆点大小
                          symbol: 'circle', // 设置拐点为实心圆
                          data: [820, 802, 1000, 934, 1190, 1220, 1320],
                          type: 'line',
                          smooth: true,
                          itemStyle:{
                              color:'#FF9042',
                          },
                          areaStyle:{
                              color: new this.$echarts.graphic.LinearGradient(
                                  0,
                                  0,
                                  1,
                                  0,
                                  [
                                      {
                                          offset: 0,
                                          color: "rgba(48, 131, 255, 0.4)",
                                      },
                                      {
                                          offset: 1,
                                          color: "rgba(36, 101, 234, 0.1)",
                                      },
                                  ],
                                  false
                              )
                          }
                      }
                  ]
              },
              mapList:{
                  title:{
                      text:"123",
                  },
                  series:[{
                      type:'map',
                      map:'china',
                      label:{
                          show:true,
                          fontSize:10,
                      },
                      zoom:1.3,
                      emphasis: {
                          label:{
                              color:'#fff'
                          },
                          itemStyle:{
                              areaColor:'#83b541'
                          }
                      }
                  }]
              },
              bookNumList:{
                  axisLabel: {
                      color: "#1E1E1E",
                      fontWeight: 'bold',
                      fontSize: 12,
                  },
                  textStyle:{
                      color: "#1E1E1E",
                      fontWeight: 'bold',
                      fontSize: 12,
                  },
                  legend: [{
                      data: ['数据抽取', ],
                      icon:'circle',
                      x:'right',
                  },{
                      data: ['数据校验', ],
                      icon:'circle',
                      x:'right',
                      top:'6%'
                  }],
                  xAxis: {
                      type: 'category',
                      axisTick: {
                          alignWithLabel: true
                      },
                      boundaryGap: false,
                      data: ['1-01', '1-02', '1-03', '1-04', '1-05', '1-06', '1-07']
                  },
                  yAxis: {
                      name:'（MB）',
                      type: 'value',
                      axisLine:{
                          show:true
                      },
                      nameTextStyle:{
                          color: "#1E1E1E",
                          fontWeight: 'bold',
                          fontSize: 12,
                      }
                  },
                  series: [
                      {
                          name:'数据抽取',
                          symbolSize: 10, // 设置折线上圆点大小
                          symbol: 'circle', // 设置拐点为实心圆
                          data: [420, 902, 901, 934, 1390, 1130, 1220],
                          type: 'line',
                          smooth: true,
                          itemStyle:{
                              color:'#3FAAF4',
                          }
                      },  {
                          name:'数据校验',
                          symbolSize: 10, // 设置折线上圆点大小
                          symbol: 'circle', // 设置拐点为实心圆
                          data: [820, 932, 901, 934, 1290, 1330, 1320],
                          type: 'line',
                          smooth: true,
                          itemStyle:{
                              color:'#FF9042',
                          }
                      }
                  ]
              },
              pieData: {
                  tooltip: {
                      trigger: "axis",
                      show: false,
                      axisPointer: {
                          // 坐标轴指示器，坐标轴触发有效
                          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                      },
                  },
                  legend: [{
                      data:['DM层','DW'],
                      top: '5%',
                      left:'70%',
                      icon:'circle',
                      formatter: ["{a|{name}}"].join("\n"),
                      textStyle: {
                          rich: {
                              a: {
                                  width: 32
                              }
                          }
                      },
                      // itemGap:10,
                  },{
                      data:['ODS','mysql'],
                      top: '10%',
                      left:'70%',
                      icon:'circle',
                      // itemGap:16,
                      formatter: ["{a|{name}}"].join("\n"),
                      textStyle: {
                          rich: {
                              a: {
                                  width: 32
                              }
                          }
                      },
                  }],
                  grid: {
                      left: "1%",
                      right: "5%",
                      // bottom: "3%",
                      containLabel: true,
                  },
                  series: [
                      {
                          type: "pie",
                          showBackground: true,
                          radius: ['30%', '65%'],
                          itemStyle: {
                              borderRadius: 10,
                              borderColor: '#fff',
                              borderWidth: 2
                          },
                          label: {
                              show: false,
                              position: 'center'
                          },
                          label: {
                              formatter: '{name|{b}}\n\n',
                              padding:[0,-40],
                              rich: {
                                  b: {
                                      fontSize: 10,
                                      color: '#999',
                                      lineHeight:1,
                                  },
                                  per:{
                                      fontSize: 20,
                                      padding:[2,4],
                                      borderRadius: 2
                                  }
                              }
                          },
                          labelLine: {
                              length: 30,
                              length2: 50,
                              maxSurfaceAngle: 40
                          },
                          data: [
                              { value: 1048, name: 'DM层',itemStyle: {
                                      color: "#FEB11C"
                                  }},
                              { value: 735, name: 'DW',itemStyle: {
                                      color: "#13EBF8"
                                  } },
                              { value: 580, name: 'ODS',itemStyle: {
                                      color: "#1374F8"
                                  } },
                              { value: 484, name: 'mysql',itemStyle: {
                                      color: "#15ED71"
                                  } },
                          ]
                      },
                  ],
              },
            pieData1: {
                tooltip: {
                    trigger: "axis",
                    show: false,
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                legend: [{
                    data:['DM层','DW'],
                    top: '5%',
                    left:'70%',
                    icon:'circle',
                    formatter: ["{a|{name}}"].join("\n"),
                    textStyle: {
                        rich: {
                            a: {
                                width: 32
                            }
                        }
                    },
                    // itemGap:10,
                },{
                    data:['ODS','mysql'],
                    top: '10%',
                    left:'70%',
                    icon:'circle',
                    // itemGap:16,
                    formatter: ["{a|{name}}"].join("\n"),
                    textStyle: {
                        rich: {
                            a: {
                                width: 32
                            }
                        }
                    },
                }],
                grid: {
                    left: "1%",
                    right: "5%",
                    // bottom: "3%",
                    containLabel: true,
                },
                series: [
                    {
                        type: "pie",
                        showBackground: true,
                        radius: ['30%', '65%'],
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        label: {
                            formatter: '{name|{b}}\n\n',
                            padding:[0,-40],
                            rich: {
                                b: {
                                    fontSize: 10,
                                    color: '#999',
                                    lineHeight:1,
                                },
                                per:{
                                    fontSize: 20,
                                    padding:[2,4],
                                    borderRadius: 2
                                }
                            }
                        },
                        labelLine: {
                            length: 30,
                            length2: 50,
                            maxSurfaceAngle: 40
                        },
                        data: [
                            { value: 1048, name: 'DM层',itemStyle: {
                                    color: "#FEB11C"
                                }},
                            { value: 735, name: 'DW',itemStyle: {
                                    color: "#13EBF8"
                                } },
                            { value: 580, name: 'ODS',itemStyle: {
                                    color: "#1374F8"
                                } },
                            { value: 484, name: 'mysql',itemStyle: {
                                    color: "#15ED71"
                                } },
                        ]
                    },
                ],
            },
              barData: {
                  tooltip: {
                      trigger: "axis",
                      show: false,
                      axisPointer: {
                          // 坐标轴指示器，坐标轴触发有效
                          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                      },
                  },
                  grid: {
                      left: "1%",
                      right: "5%",
                      // bottom: "3%",
                      containLabel: true,
                  },
                  xAxis: [
                      {
                          splitLine: {
                              show: false,
                          },
                          axisLine: {
                              show: true,
                              textStyle: {
                                  color: "none",
                              },
                          },
                          axisTick: {
                              show: false,
                          },
                          axisLabel:{
                              show: false,
                          },

                      },
                  ],
                  yAxis: [
                      {
                          // splitLine: {
                          //     show: false,
                          // },
                          // axisTick: {
                          //     show: false,
                          // },
                          // axisLine: {
                          //     //y轴
                          //     show: false,
                          // },
                          type: "category",
                          axisTick: {
                              alignWithLabel: true
                          },
                          inverse: true,
                          data: ['Top1','Top2','Top3','Top4','Top5'],
                          axisLabel: {
                              color: "#1E1E1E",
                              fontWeight: 'bold',
                              fontSize: 16,
                          },
                      },
                  ],
                  series: [
                      {
                          type: "bar",
                          stack: 'total',
                          barWidth: 21, // 柱子宽度
                          label: {
                              show: true,
                              position: "top", // 位置
                              color: "#1E1E1E",
                              fontSize: 12,
                              distance: 5, // 距离
                              formatter: "{c}条", // 这里是数据展示的时候显示的数据
                          }, // 柱子上方的数值
                          itemStyle: {
                              // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

                              color: new this.$echarts.graphic.LinearGradient(
                                  0,
                                  0,
                                  1,
                                  0,
                                  [
                                      {
                                          offset: 0,
                                          color: "#438FF6",
                                      },
                                      {
                                          offset: 1,
                                          color: "#438FF6",
                                      },
                                  ],
                                  false
                              ), // 渐变
                          },
                          data: [123,234,456,666,123],
                      },
                      {
                          type: "bar",
                          stack: 'total',
                          barWidth: 21, // 柱子宽度
                          showBackground: true,
                          label: {
                              show: true,
                              position: "top", // 位置
                              color: "#1E1E1E",
                              fontSize: 12,
                              distance: 5, // 距离
                              formatter: "{c}M", // 这里是数据展示的时候显示的数据
                          }, // 柱子上方的数值
                          emphasis: {
                              focus: 'series'
                          },
                          itemStyle: {
                              // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

                              color: new this.$echarts.graphic.LinearGradient(
                                  0,
                                  0,
                                  1,
                                  0,
                                  [
                                      {
                                          offset: 0,
                                          color: "#FEB11C",
                                      },
                                      {
                                          offset: 1,
                                          color: "#FEB11C",
                                      },
                                  ],
                                  false
                              ), // 渐变
                          },
                          data: [123,234,456,45,677],
                      },
                  ],
              },
                barData1: {
                  tooltip: {
                      trigger: "axis",
                      show: false,
                      axisPointer: {
                          // 坐标轴指示器，坐标轴触发有效
                          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                      },
                  },
                  grid: {
                      left: "1%",
                      right: "5%",
                      // bottom: "3%",
                      containLabel: true,
                  },
                  xAxis: [
                      {
                          splitLine: {
                              show: false,
                          },
                          axisLine: {
                              show: true,
                              textStyle: {
                                  color: "none",
                              },
                          },
                          axisTick: {
                              show: false,
                          },
                          axisLabel:{
                              show: false,
                          },

                      },
                  ],
                  yAxis: [
                      {
                          // splitLine: {
                          //     show: false,
                          // },
                          // axisTick: {
                          //     show: false,
                          // },
                          // axisLine: {
                          //     //y轴
                          //     show: false,
                          // },
                          type: "category",
                          axisTick: {
                              alignWithLabel: true
                          },
                          inverse: true,
                          data: ['Top1','Top2','Top3','Top4','Top5'],
                          axisLabel: {
                              color: "#1E1E1E",
                              fontWeight: 'bold',
                              fontSize: 16,
                          },
                      },
                  ],
                  series: [
                      {
                          type: "bar",
                          stack: 'total',
                          barWidth: 21, // 柱子宽度
                          label: {
                              show: true,
                              position: "top", // 位置
                              color: "#1E1E1E",
                              fontSize: 12,
                              distance: 5, // 距离
                              formatter: "{c}条", // 这里是数据展示的时候显示的数据
                          }, // 柱子上方的数值
                          itemStyle: {
                              // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

                              color: new this.$echarts.graphic.LinearGradient(
                                  0,
                                  0,
                                  1,
                                  0,
                                  [
                                      {
                                          offset: 0,
                                          color: "#438FF6",
                                      },
                                      {
                                          offset: 1,
                                          color: "#438FF6",
                                      },
                                  ],
                                  false
                              ), // 渐变
                          },
                          data: [123,234,456,666,123],
                      },
                      {
                          type: "bar",
                          stack: 'total',
                          barWidth: 21, // 柱子宽度
                          showBackground: true,
                          label: {
                              show: true,
                              position: "top", // 位置
                              color: "#1E1E1E",
                              fontSize: 12,
                              distance: 5, // 距离
                              formatter: "{c}M", // 这里是数据展示的时候显示的数据
                          }, // 柱子上方的数值
                          emphasis: {
                              focus: 'series'
                          },
                          itemStyle: {
                              // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

                              color: new this.$echarts.graphic.LinearGradient(
                                  0,
                                  0,
                                  1,
                                  0,
                                  [
                                      {
                                          offset: 0,
                                          color: "#FEB11C",
                                      },
                                      {
                                          offset: 1,
                                          color: "#FEB11C",
                                      },
                                  ],
                                  false
                              ), // 渐变
                          },
                          data: [123,234,456,45,677],
                      },
                  ],
              },
              durationList: {
                  tooltip: {
                      trigger: "axis",
                      show: false,
                      axisPointer: {
                          // 坐标轴指示器，坐标轴触发有效
                          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                      },
                  },
                  grid: {
                      left: "1%",
                      right: "5%",
                      // bottom: "3%",
                      containLabel: true,
                  },
                  xAxis: [
                      {
                          splitLine: {
                              show: false,
                          },
                          axisLine: {
                              show: true,
                              textStyle: {
                                  color: "none",
                              },
                          },
                          axisTick: {
                              show: false,
                          },
                          axisLabel:{
                              show: false,
                          },

                      },
                  ],
                  yAxis: [
                      {
                          // splitLine: {
                          //     show: false,
                          // },
                          // axisTick: {
                          //     show: false,
                          // },
                          // axisLine: {
                          //     //y轴
                          //     show: false,
                          // },
                          type: "category",
                          axisTick: {
                              alignWithLabel: true
                          },
                          inverse: true,
                          data: ['Top1','Top2','Top3','Top4','Top5'],
                          axisLabel: {
                              color: "#1E1E1E",
                              fontWeight: 'bold',
                              fontSize: 16,
                          },
                      },
                  ],
                  series: [
                      {
                          type: "bar",
                          stack: 'total',
                          showBackground: true,
                          barWidth: 21, // 柱子宽度
                          label: {
                              show: true,
                              position: "top", // 位置
                              color: "#1E1E1E",
                              fontSize: 12,
                              distance: 5, // 距离
                              formatter: function (c) {
                                  console.log(c,'ccc')
                                  const dt = new Date(c.value);
                                  const h  = (dt.getHours()+'').padStart(1,'0')
                                  const min = (dt.getMinutes()+'').padStart(2,'0')
                                  return `${h}h${min}min`
                              } // 这里是数据展示的时候显示的数据
                          }, // 柱子上方的数值
                          itemStyle: {
                              // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

                              color: new this.$echarts.graphic.LinearGradient(
                                  0,
                                  0,
                                  1,
                                  0,
                                  [
                                      {
                                          offset: 0,
                                          color: "#55B5FF",
                                      },
                                      {
                                          offset: 1,
                                          color: "#55B5FF",
                                      },
                                  ],
                                  false
                              ), // 渐变
                          },
                          data: [12393293,23431313,45631313,66631313,12331313],
                      },
                  ],
              },
               durationList1: {
                  tooltip: {
                      trigger: "axis",
                      show: false,
                      axisPointer: {
                          // 坐标轴指示器，坐标轴触发有效
                          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                      },
                  },
                  grid: {
                      left: "1%",
                      right: "5%",
                      // bottom: "3%",
                      containLabel: true,
                  },
                  xAxis: [
                      {
                          splitLine: {
                              show: false,
                          },
                          axisLine: {
                              show: true,
                              textStyle: {
                                  color: "none",
                              },
                          },
                          axisTick: {
                              show: false,
                          },
                          axisLabel:{
                              show: false,
                          },

                      },
                  ],
                  yAxis: [
                      {
                          // splitLine: {
                          //     show: false,
                          // },
                          // axisTick: {
                          //     show: false,
                          // },
                          // axisLine: {
                          //     //y轴
                          //     show: false,
                          // },
                          type: "category",
                          axisTick: {
                              alignWithLabel: true
                          },
                          inverse: true,
                          data: ['Top1','Top2','Top3','Top4','Top5'],
                          axisLabel: {
                              color: "#1E1E1E",
                              fontWeight: 'bold',
                              fontSize: 16,
                          },
                      },
                  ],
                  series: [
                      {
                          type: "bar",
                          stack: 'total',
                          showBackground: true,
                          barWidth: 21, // 柱子宽度
                          label: {
                              show: true,
                              position: "top", // 位置
                              color: "#1E1E1E",
                              fontSize: 12,
                              distance: 5, // 距离
                              formatter: function (c) {
                                  console.log(c,'ccc')
                                  const dt = new Date(c.value);
                                  const h  = (dt.getHours()+'').padStart(1,'0')
                                  const min = (dt.getMinutes()+'').padStart(2,'0')
                                  return `${h}h${min}min`
                              } // 这里是数据展示的时候显示的数据
                          }, // 柱子上方的数值
                          itemStyle: {
                              // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）

                              color: new this.$echarts.graphic.LinearGradient(
                                  0,
                                  0,
                                  1,
                                  0,
                                  [
                                      {
                                          offset: 0,
                                          color: "#55B5FF",
                                      },
                                      {
                                          offset: 1,
                                          color: "#55B5FF",
                                      },
                                  ],
                                  false
                              ), // 渐变
                          },
                          data: [12393293,23431313,45631313,66631313,12331313],
                      },
                  ],
              },
          }
      }
  }
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding:0;
  }
  .headerTitle{
     height:170px;
     display: flex;
     flex-direction: row;
     background-image: url("../../../assets/images/navGround.png");
     background-size: cover;
    .titltOne{
       display: flex;
       flex-direction: row;
       padding:44px 117px  67px 71px;
      .images{
        img{

        }
      }
      .headerRight{
          flex-direction: column;
          margin-left: 2px;
          vertical-align: middle;
          font-weight: normal;
          color: #4399FC;
          &Num{
            font-size: 26px;
            font-family: LcdD;
            font-weight: 400;
            color: #4399FC;
          }
      }
    }
  }
  .centenBody{
     padding:20px 30px 30px;
     margin-top:-40px;
    .centenBodyLineOne{
      height:428px;
      margin-top:20px;
      .centenBodyLineOneCard{
        height:428px;
        .centenBodyLineOneCardTitle{
          text-align: center;
          padding-top:19px;
          padding-bottom:19px;
          font-size: 16px;
          font-family: PingFang;
          font-weight: bold;
          color: #1E1E1E;
        }
      }
      .centenBodyLineOneCardCenter{
        margin: 0 20px;
      }
    }
    .centenBodyLineTwo{
      height:428px;
      margin-top:20px;
      .centenBodyLineOneCard{
        height:428px;
        .centenBodyLineOneCardTitle{
          text-align: center;
          padding-top:19px;
          font-size: 16px;
          font-family: PingFang;
          font-weight: bold;
          color: #1E1E1E;
        }
      }
      .centenBodyLineOneCardCenter{
        margin: 0 20px;
      }
    }

  }
</style>
